<template>
	<view class="app">
		<view class="My">
			<view class="status_bar">

			</view>
			<!-- 用户信息 -->
			<view class="My-Info p-3 pb-0  d-flex">
				<up-avatar src="/static/image/avatar.png" shape="square" size="60"></up-avatar>
				<view class="My-Info-right ml-2 flex-between-center">
					<view class="My-Info-right-information">
						<h4 class="f-size-20">{{state.userInfo.userNickname}}</h4>
						<image src="/static/icon/Vip1.png" mode=""></image>
					</view>
					<image class="goto" src="/static/svg/ze-arrow.svg" mode=""></image>
				</view>
				<up-line class="pt-5"></up-line>
			</view>
			<!-- 宠物信息 -->
			<view class="My-Pet px-3  pb-0">
				<p class="f-size-18 font-weight-600">My pet</p>
				<view class="d-flex jc-between py-2">
					<view class="My-pet-Info d-flex ai-center">
						<up-avatar src="/static/image/CatAvatar@3x.png" shape="square" size="54"></up-avatar>
						<view class="My-pet-Info-right ml-2">
							<p class="f-size-14 font-weight-600">Molly</p>
							<view class="battery-Info">
								<span class="f-size-12 font-weight-600 mr-1">100%</span>
								<image class="battery" src="/static/svg/fa5-battery-full-fas.svg" mode=""></image>
							</view>
						</view>
					</view>
					<view class="My-pet-add">
						<view class="My-pet-add-btn bor-radius-square flex-center">
							<image src="/static/icon/add.png" mode="" @click="state.show=true"></image>
						</view>
					</view>
				</view>
				<up-line class="pt-3"></up-line>
			</view>
			<!-- 功能区 -->
			<view class="My-abilitys">
				<view class="My-ability-item flex-between-center p-3 pb-0" v-for="item,index in state.abilitys"
					:key="index" @click="goto(item.url)">
					<view class="My-ability-item-left pb-3 flex-center">
						<image v-if="item.label == 'Equipment'" :src="`/static/icon/${item.path}.png`" mode=""
							style="width: 52rpx;height: 30rpx;"></image>
						<image v-else :src="`/static/icon/${item.path}.png`" mode=""></image>
						<text class="m-2">{{item.label}}</text>
					</view>
					<image class="My-ability-item-detail pb-3" src="/static/icon/goto-black.png" mode=""
						v-if="item.label!=='Language'"></image>
					<text v-else class="pb-3 color-grey">English</text>
					<up-line style="width: 100%;"></up-line>
				</view>
			</view>
		</view>
		<!-- 模态框组件 -->
		<necklacePopup v-model="state.show" title="Add failure"
			content="Adding a pet requires connecting a new device first" @confirm="goto('/pages/MyPet/Scan')"
			@close="state.show = false">
			<template #note>
				<view class="t-center mt-2 f-size-12 font-weight-600">
					<text style="color: #757587;">No equipment?</text>
					<text style="color: #5f5edd;">click to buy</text>
				</view>
			</template>
		</necklacePopup>
	</view>
</template>

<script setup>
	import {
		findUserInfoDetailsApi
	} from '@/api/account.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	const {
		proxy
	} = getCurrentInstance()
	// onMounted(async () => {
	// 	const res = await findUserInfoDetailsApi()
	// 	state.userInfo = res.data
	// 	console.log(res);
	// })
	// onShow(() => {
	// 	state.show = false
	// })
	// const userInfo = computed(() => {
	// 	return proxy.$store.state.userStore.userInfo
	// })

	const state = reactive({
		show: false,
		abilitys: [{
				label: "Equipment",
				path: 'equipment',
				url: '/pages/My/Equipment'
			},
			{
				label: "Message",
				path: 'message',
				url: "/pages/My/Message"
			},
			{
				label: "Language",
				path: 'Earth',

			},
			{
				label: "Help and Feedback",
				path: 'emit',
				url: "/pages/My/FeedBack"
			},
			{
				label: "Set up",
				path: "set",
				url: "/pages/My/Setting"
			},
		],
		userInfo: {}
	})

	function goto(url) {
		if (url) {
			uni.$to(url)

		}
	}

	function addDeviceFun() {

	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.app {
		.My {
			.My-Info {
				flex-wrap: wrap;

				.My-Info-right {
					flex: 1;

					.goto {
						width: 40rpx;
						height: 40rpx;
					}

					.My-Info-right-information {
						image {
							width: 96rpx;
							height: 28rpx;
						}
					}
				}
			}

			.My-Pet {
				.My-pet-Info {
					width: 50%;

					.My-pet-Info-right {
						width: 100%;
						border-right: 1px solid #e9e9e9;

						.battery {
							width: 40rpx;
							height: 40rpx;
							vertical-align: bottom;
						}
					}
				}

				.My-pet-add {
					width: 35%;

					.My-pet-add-btn {
						width: 108rpx;
						height: 108rpx;
						border: 2px solid #B0B0B0;
						line-height: 108rpx;

						image {
							width: 66rpx;
							height: 66rpx;
						}
					}
				}
			}

			.My-abilitys {
				.My-ability-item {
					flex-wrap: wrap;

					.My-ability-item-left {
						image {
							width: 45rpx;
							height: 45rpx;
						}
					}

					.My-ability-item-detail {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>